<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作shuju.html文件</title>
</head>
<body>
<h1>提取的数据</h1>
<button onclick="loadShujuFile()">加载 shuju.html 并提取数据</button>
<button onclick="downloadJSON()">下载 JSON 文件</button>

<div id="data-container"></div>

<script>
    let extractedBooks = []; // 用于存储提取的书籍数据

    function loadShujuFile() {
        // 创建一个 XMLHttpRequest 来读取 shuju.html 文件
        const xhr = new XMLHttpRequest();
        xhr.open("GET", "masterpiece.html", true);  // 请求 shuju.html 文件
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                // 获取到 HTML 内容
                const htmlContent = xhr.responseText;
                // 创建一个新的 DOM 来解析 htmlContent
                const parser = new DOMParser();
                const doc = parser.parseFromString(htmlContent, 'text/html');

                // 提取数据
                const books = [];
                const items = doc.querySelectorAll('.wr_bookList_item');
                items.forEach(item => {
                    const book = {
                        title: item.querySelector('.wr_bookList_item_title')?.innerText || '无标题',
                        author: item.querySelector('.wr_bookList_item_author')?.innerText || '无作者',
                        readingCount: item.querySelector('.wr_bookList_item_reading_number')?.innerText || '无数据',
                        recommendationRate: item.querySelector('.wr_bookList_item_reading_percent')?.innerText || '无数据',
                        description: item.querySelector('.wr_bookList_item_desc')?.innerText || '无简介',
                        img: item.querySelector('.wr_bookCover_img')?.getAttribute('src') || '无图片'
                    };
                    books.push(book);
                });

                extractedBooks = books; // 存储提取的数据

                // 显示提取的数据
                displayBooksData(books);
            }
        };
        xhr.send();
    }

    function displayBooksData(books) {
        const container = document.getElementById('data-container');
        container.innerHTML = ''; // 清空容器

        books.forEach(book => {
            const bookElement = document.createElement('div');
            bookElement.innerHTML = `
          <h3>${book.title}</h3>
          <p>作者: ${book.author}</p>
          <p>阅读人数: ${book.readingCount}</p>
          <p>推荐值: ${book.recommendationRate}</p>
          <p>简介: ${book.description}</p>
          <p>图片地址: <img src="${book.img}" alt="${book.title}" style="width: 100px;"></p>
          <hr>
        `;
            container.appendChild(bookElement);
        });
    }

    // 下载提取的数据为 JSON 文件
    function downloadJSON() {
        const jsonData = JSON.stringify(extractedBooks, null, 2);  // 转换为格式化的 JSON 字符串

        // 创建一个 Blob 对象
        const blob = new Blob([jsonData], {type: 'application/json'});
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');  // 创建一个 <a> 标签
        a.href = url;  // 设置下载链接
        a.download = 'books_data.json';  // 设置下载文件名
        document.body.appendChild(a);  // 将 <a> 标签添加到页面
        a.click();  // 模拟点击 <a> 标签开始下载
        document.body.removeChild(a);  // 下载后移除 <a> 标签
        URL.revokeObjectURL(url);  // 释放 URL 对象
    }
</script>
</body>
</html>
